<template>
  <h1>{{name}},{{age}}</h1>
  <button @click="sayHello">点我</button>
</template>

<script>
//setup的第二种返回值可以是一个渲染函数，这个渲染函数我们在vue2的Vue构造对象也讲过
// render => h('#app')，但是在vue3中我们需要额外引入
// import {h} from 'vue'

export default {
  name: 'App',
  // vue3 中存在一个全新的配置项，叫做setup，你的数据，方法，生命周期钩子
  // 都需要写在这里
  setup(props) {
    
    // 数据
    let name = "pop"
    let age = 18

    // 方法
    function sayHello(){
      alert(`我叫${name},我${age}岁`)
    }

    /**
     * 1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
      2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）</span>
     */

    return {
      name,age,sayHello
    }

    // return ()=>{
    //   return h('h1','一个渲染函数')
    // }
    //他会替换页面的东西
    // return ()=>h('h1','一个渲染函数')
    
  }
}
</script>


